<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>显示会议室信息</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../static/css/select.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.idTabs.min.js"></script>
    <script type="text/javascript" src="../../../static/js/select-ui.min.js"></script>
    <script type="text/javascript" src="../../../static/editor/kindeditor.js"></script>

    <script type="text/javascript" src="../../../static/js/vue.js"></script>
    <script type="text/javascript" src="../../../static/js/axios.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {
            $(".select1").uedSelect({
                width: 345
            });

        });
    </script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">会议管理</a></li>
        <li><a href="#">会议管理</a></li>
    </ul>
</div>

<div class="formbody" id="showRoom" v-if="messages != ''">

    <div class="formtitle"><span>基本信息</span></div>
<!--    <input type="hidden" v-bind:value="messages.mid" />-->
    <ul class="forminfo">
        <li>
            <label>会议室名: </label>
            <i>{{messages.meetRoomName}}</i>
        </li>
        <li>
            <label>会议室地址: </label>
            <i>{{messages.meetRoomPlace}}</i>
        </li>
        <li>
            <label>容量: </label>
            <i>{{messages.capacity}}</i>
        </li>
        <li>
            <label>是否有空调: </label>
            <i v-if="messages.isHaveHvac == 0">无</i>
            <i v-if="messages.isHaveHvac == 1">有</i>
        </li>

        <li>
            <label>&nbsp;</label>
            <input type="button" value="返回" class="btn" onclick="window.history.go(-1);"/>
            <input type="button" class="btn" v-if="customOneName.roleId==2" value="预约会议" @click="toReservation(messages.mid)"/>
<!--            <input type="button" class="btn" value="预约会议" @click="toReservation()"/>-->
        </li>
    </ul>
    <div v-if="messages == ''"> <h3>没有预约会议信息</h3></div>
    <table class="tablelist" v-if="messages != ''">
        <thead>
            <tr>
                <th>会议号</th>
                <th>预约部门</th>
                <th>会议开始时间</th>
                <th>会议结束时间</th>
                <th>预约人</th>
                <th>会议状态</th>
                <th v-if="customOneName.roleId==3">操作</th>
<!--                <th>操作</th>-->
            </tr>
        </thead>
        <tbody>
            <tr v-for=" reservationmeetroom in messages.reservationmeetroomList ">
                <td>{{reservationmeetroom.rid}}</td>
                <td>{{reservationmeetroom.dept.deptName}}</td>
                <td>{{reservationmeetroom.meetstarttime}}</td>
                <td>{{reservationmeetroom.meetendtime}}</td>
                <td>{{reservationmeetroom.reservationUserName}}</td>
                <td v-if="reservationmeetroom.status ==0">待审批</td>
                <td v-if="reservationmeetroom.status ==1">失效</td>
                <td v-if="reservationmeetroom.status ==2">审批通过</td>
                <td v-if="reservationmeetroom.status ==3">审批不通过</td>
                <td v-if="customOneName.roleId==3"><a href="javascript:;" class="tablelink" @click="toApproval(reservationmeetroom.rid)">审批</a></td>
<!--                <td ><a href="javascript:;" class="tablelink" @click="toApproval(reservationmeetroom.rid)">审批</a></td>-->
            </tr>
        </tbody>
    </table>
    <div class="tip">
        <div class="tiptop"><span>预约会议</span>
            <a></a>
        </div>

        <div class="tipinfo">
            <label>会议室名: </label><b>{{messages.meetRoomName}}</b><br/><br/>
            <label>输入会议开始时间: </label><input style="outline: 2px solid grey" type="datetime-local" id="meetstarttime" @change="testStartTime()" /><br/><br/>
            <label>输入会议结束时间: </label><input style="outline: 2px solid grey" type="datetime-local" id="meetendtime" @blur="testEndTime()" />
        </div>

        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定" @click="toSubmit()" />&nbsp;
            <input name="" type="button" class="cancel" value="取消" />
        </div>

    </div>
    <!--审批会议弹框-->
    <div class="tip2">
        <div class="tiptop"><span>审批会议</span>
            <a></a>
        </div>

        <div class="tipinfo">
            <br/><br/>
            <label>选择审批结果: </label>
            <select class="select1"  id="status" style="border: #7b7b7b 1px solid" >
                <option value="">请选择</option>
                <option value="2">审批通过</option>
                <option value="3">审批不通过</option>
            </select>
        </div>

        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定" @click="approval()" />&nbsp;
            <input name="" type="button" class="cancel" value="取消" />
        </div>

    </div>
</div>

    <script type="text/javascript">

        var params = window.location.search;
        var mId = params.split("=").at(1);

        //用户信息
        //var customOneName = JSON.parse(sessionStorage.getItem("customer"));

        //选中的会议id
        var rId = "";

        var vm = new Vue({
            el:"#showRoom",
            data:
                {
                    customOneName:'',
                    messages:'',
                },
            methods:{
                send(){
                    // alert(mId);
                    axios({
                        method:'post',
                        url:'http://localhost:8099/meetroom/show/'+mId,
                    }).then(function(res){
                        vm.messages=res.data;
                        vm.customOneName = JSON.parse(sessionStorage.getItem("customer"));
                    }).catch(function (reason) {
                        console.log(reason);
                    })
                },
                toReservation(){
                    $(".tip").fadeIn(200);
                    $(".sure").click(function () {
                        $(".tip").fadeOut(100);
                    });

                    $(".tiptop a").click(function () {
                        $(".tip").fadeOut(200);
                    });

                    $(".cancel").click(function () {
                        $(".tip").fadeOut(100);
                    });
                },
                testStartTime(){
                    var now = new Date();
                    now.setSeconds(0);
                    var meetstarttime = $('#meetstarttime').val();
                    var start = new Date(meetstarttime);
                    if(start < now){
                        $('#meetstarttime').val("");
                        alert("开始时间时间小于当前时间，请重新选择开始时间！！！");
                    }
                },
                testEndTime(){
                    var meetstarttime = $('#meetstarttime').val();
                    if(meetstarttime == '' || meetstarttime == null){
                        $('#meetendtime').val("");
                        alert("开始时间为空，请先选择开始时间！！！");
                        return;
                    }
                    var meetendtime = $('#meetendtime').val();

                    var start = new Date(meetstarttime);
                    var end = new Date(meetendtime);

                    if(end-start <= 0){
                        $('#meetendtime').val("");
                        alert("结束时间小于开始时间，请重新选择结束时间！！！");
                    }
                },
                toApproval(ele){
                    $(".tip2").fadeIn(200);
                    rId = ele;
                    $(".sure").click(function () {
                        $(".tip2").fadeOut(100);
                    });

                    $(".tiptop a").click(function () {
                        $(".tip2").fadeOut(200);
                    });

                    $(".cancel").click(function () {
                        $(".tip2").fadeOut(100);
                    });
                },
                approval(){
                    var status = $("#status").val();
                    if(status != null && status != ''){
                        axios({
                            method:'post',
                            url:'http://localhost:8099/reservationmeetroom/approval',
                            data:{
                                "status":Number.parseInt(status),
                                "rid": Number.parseInt(rId),
                            }
                        }).then(function(res){
                            $(".tip2").fadeOut(100);
                            vm.send();
                            alert("审批成功!!!");
                        }).catch(function (reason) {
                            alert("审批失败!!!");
                        })
                    }else {
                        alert("没有给出审批结果，审批失败!!!");
                    }
                },
                toSubmit(){
                    var meetstarttime = $('#meetstarttime').val();
                    var meetendtime = $('#meetendtime').val();

                    var start = this.dateFormat(new Date(meetstarttime));
                    var end = this.dateFormat(new Date(meetendtime));

                    if(meetstarttime == '' || meetstarttime == null || meetendtime == '' || meetendtime == null){
                        alert("会议时间不能为空！！！");
                    }else {
                        axios({
                            method:'post',
                            url:'http://localhost:8099/reservationmeetroom/addmeeting',
                            data:{
                                "meetstarttime":start,
                                "meetendtime":end,
                                "mid":Number.parseInt(mId),
                                "reservationUserId":vm.customOneName.id,  //登录者id
                            }
                        }).then(function(res){
                            $(".tip").fadeOut(100);
                            vm.send();
                            alert("预约成功!!!");
                        }).catch(function (reason) {
                            alert("预约失败!!!");
                        })
                    }
                },
                dateFormat(date){
                    var nowTime = new Date(date);
                    var year = nowTime.getFullYear();
                    var month = nowTime.getMonth()+1;
                    var day = nowTime.getDate();
                    var hour = nowTime.getHours();
                    var minutes = nowTime.getMinutes();
                    var second = nowTime.getSeconds();
                    if(month>0 && month<10){
                        month = "0"+month;
                    }
                    if(day>0 && day<10){
                        day = "0"+day;
                    }
                    if(hour>0 && hour<10){
                        hour = (hour-8+24)%24
                        hour = "0"+hour;
                    }
                    if(minutes>0 && minutes<10){
                        minutes = "0"+minutes;
                    }
                    if(second>0 && second<10){
                        second = "0"+second;
                    }
                    var nowDate = year+"-"+month+"-"+day+" "+hour+":"+minutes+":"+second;
                    return nowDate;
                }
            },
            //页面加载完自动执行
            mounted(){
                this.send();
            }
        });

    </script>
</body>

</html>